import { message } from 'antd';
import { useState, useEffect } from 'react';

import { dateFormat } from '../util/util';

const useUpload = (options) => {
    const [uploader, setUploader] = useState(null);
    const [file, setFile] = useState(null);
    const [md5Value, setMd5Value] = useState('');
    const [uploadState, setUploadState] = useState('wait'); // wait: 等待上传 divide: 正在分片 start: 开始上传 ing: 正在上传 success: 上传成功  error: 上传失败
    const [filePersent, setFilePersent] = useState({}); // 文件上传百分比 { name: '文件名称', persent: '文件上传百分比'}
    // const [dividePersent, setDividePersent] = useState({}); // 文件分片百分比
    const [reason, setReason] = useState('');  // 文件上传出错信息

    useEffect(() => {
        init(options);
    }, []);

    function init(options) { 
        const combineOptions = Object.assign({
            auto: false,  // 选完文件后，是否自动上传
            swf: './lib/webuploader/Uploader.swf',  // swf文件路径
            resize: false,
            chunked: true,  // 是否要分片处理大文件上传
            chunkSize: 2 * 1024 * 1024,  // 分片大小 字节 2M分块
            threads: 6, // 上传并发数，允许同时最大上传进程数
            disableGlobalDnd: true,  // 是否禁掉整个页面的拖拽功能，如果不禁用，图片拖进来的时候会默认被浏览器打开
            fileNumLimit: 1024, //  验证文件总数量, 超出则不允许加入队列
            fileSizeLimit: 1024 * 1024 * 1024 * 10, // 验证文件总大小是否超出限制, 超出则不允许加入队列  10G
            fileSingleSizeLimit: 1024 * 1024 * 1024, // 验证单个文件大小是否超出限制, 超出则不允许加入队列 1G
            accept: {
                extensions: 'zip', // 允许的文件后缀，不带点，多个用逗号分割
            },
        }, options);

        // eslint-disable-next-line
        const uploader = WebUploader.create(combineOptions);

        setUploader(uploader);

        // 文件被加入队列之前触发
        uploader.on('beforeFileQueued', function (file) {
            // console.log('文件加入队列前：', file);
            if (!checkFileName(file)) { 
                message.error('文件名称不符合规范');
                return false;
            }
            // setFiles(file);
        });

        // 单个文件被加入队列触发
        uploader.on('fileQueued', function (file) {
            // console.log('单个文件加入队列', file);
            setFile(file);
            setUploadState('divide');

            // 计算md5值
            uploader.md5File(file)
                // 及时显示进度
                .progress(function (percentage) { 
                    // console.log('percentage', percentage);
                    const { name = '' } = file;
                    const persent = (Number(percentage) * 100).toFixed(0);
                    // setDividePersent({name, persent});
                    setFilePersent({name, persent})
                })
                .then(function (val) {
                    file.md5 = val;
                    setMd5Value(val);
                    // 开始上传
                    uploader.upload();
                });
        });

        // 文件批量加入队列触发
        // uploader.on('filesQueued', function (files){ 
        //     console.log('文件批量加入队列', files);
        // });
        
        // 文件移除队列触发
        uploader.on('fileDequeued', function () {
            // console.log('文件移除队列触发：', file);
        });

        // 文件上传添加附带参数
        uploader.on('uploadBeforeSend', function (block, data) {
            // console.log('添加文件上传附带参数：', block, data);
            // block 分块数据 block.file 为分块对应的file对象
            const file = block.file;

            // 修改data可以控制发送哪些携带数据
            data.md5 = file.md5;
            data.username = 'test';
            data.project = 'vgimap';

            // 文件大于chunksize 分片上传
            if (block.chunks > 1) { 
                data.isChunked = true;
            } else {
                data.isChunked = false;
            }
        });

        // 文件开始上传时触发
        uploader.on('startUpload', function () {
            // console.log('文件开始上传：');
            setUploadState('ing');
        });

        // 文件上传结束时触发
        uploader.on('uploadFinished', function () {
            // console.log('文件上传结束：');
        });

        // 文件上传过程中触发，携带上传进度
        uploader.on('uploadProgress', function (file, percentage ) {
            // console.log('文件上传进度：', file, percentage);
            const { name = '' } = file;
            const persent = (Number(percentage) * 100).toFixed(0);
            setFilePersent({name, persent});
        });

        // 文件上传出错触发
        uploader.on('uploadError', function (file, reason) {
            // console.log('文件上传出错：', file, reason);
            setUploadState('error');
            setReason(reason);
        });

        // 文件上传成功触发
        uploader.on('uploadSuccess', function (file) {
            // console.log('文件上传成功：', file, response);
            setUploadState('success');
            setFile(file);
        });

        // 文件上传完成触发
        uploader.on('uploadComplete', function () {
            // console.log('文件上传完成：', file);
        });
    }

    /**
     * 文件名称校验  文件名称必须符合 bj20220228 省名称拼音小写加当天日期
     * @param {*} file 
     */
    function checkFileName(file) { 
        const fileName = file.name;
        const fileDate = getDateFromName(fileName);
        const nowTime = dateFormat(new Date(), 'yyyyMMdd');
        if (fileDate !== nowTime) { 
            return false;
        }
        return true;
    }
    
    /**
     * 获取文件名中的日期
     * @param {*} name 
     */
    function getDateFromName(name) { 
        var pattern = new RegExp('[0-9]+');
        var date = name.match(pattern);
        return date[0];
    }

    return [{ uploader, file, uploadState, filePersent, md5Value, reason }, setUploadState];
    
};

export default useUpload;